<template>
  <div class="wrap">
    <!-- 调用header组件 -->
    <Header title="医生详情" />
    <div class="content">
      <div class="title">
        <h3>内容标题---{{id}}</h3>
      </div>
      <div class="date-box">
        <span>发布时间:2018-02-05</span>
        <span>点击:10次</span>
      </div>
      <div class="text">
        <p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p>
      </div>
      <!-- 评论区域 -->
      <div class="comment">
        <div class="comment-title">
          <h3>发表评论</h3>
        </div>
        <div class="comment-text">
          <textarea placeholder="请输入要评论的内容..." v-model="val"></textarea>
        </div>
        <div class="btn">
          <div class="mui-btn mui-btn-primary" @click="comment">
            发表评论
          </div>
        </div>
        <div class="comment-list">
          <div class="comment-item" v-for="item in commentList" :key="item.id">
            <div class="comment-detail">
              <span>第{{item.floor}}楼</span>
              <span>用户:{{item.user}}</span>
              <span>发表时间:{{new Date() | dateFormat}}</span>
            </div>
            <div class="comment-content">
              <p>{{item.content}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>


    <Tabbar />
  </div>
</template>
<script>
  import Header from "../comments/header.vue";
  import Tabbar from "../comments/tabbar.vue";
  import {
    Toast
  } from "mint-ui";
  export default {
    data(e) {
      //传过来的详情id
      // console.log(e.$route.params.id);
      return {
        id: this.$route.params.id,
        detail: {},
        val: "",
        commentList: [{
            id: 1,
            floor: 1,
            user: "shaoyanan",
            add_time: "2018-01-24",
            content: "文章不错！"
          },
          {
            id: 2,
            floor: 2,
            user: "小雅",
            add_time: "2017-06-24",
            content: "不错！"
          }
        ]
      };
    },
    created() {
      this.getNewsdetail();
    },
    mounted() {
      this.comment()
    },
    methods: {
      //获取新闻详情数据
      getNewsdetail() {
        this.$http.get("url/" + this.id).then(
          res => {
            if (res.data.code == 0) {
              //如果返回的有数组 就取第0项
              this.detail = res.data.message[0];
            } else {
              console.log(res.data.msg);
            }
          },
          err => {
            Toast("获取新闻详情数据失败！");
          }
        );
      },
      //发表评论
      comment() {
        if (!this.val) {
          Toast("评论内容不能为空！");
        } else {
          var newComment = {
            floor: this.floor,
            user: "xiaoxiao",
            add_time: new Date(),
            content: this.val
          };
          this.commentList.push(newComment);
          this.val = "";
        }
      }
    },
    components: {
      Header: Header,
      Tabbar: Tabbar
    }
  };
</script>
<style scoped>
  .wrap {
    /* background-color: #fff; */
    height: 100%;
  }

  .content {
    padding: 10px;
    margin-bottom: 50px;
  }

  .title h3 {
    color: red;
  }

  .date-box {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
  }

  .date-box span {
    color: blue;
  }

  .text {
    margin-top: 10px;
  }

  .comment-title h3 {
    border-bottom: 1px solid #ccc;
    font-weight: 400;
    font-size: 18px;
    color: red;
    border-top: 1px solid #ccc;
    padding: 10px 0;
  }

  input[type="submit"],
  .mui-btn-primary,
  .mui-btn-blue {
    width: 100%;
    height: 40px;
    line-height: 27px;
  }

  .comment-text textarea {
    margin-bottom: 0;
  }

  .comment-list {
    margin-top: 10px;
  }

  .comment-detail {
    padding: 10px;
    background-color: #ffc10724;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
  }

  .comment-content {
    padding-top: 10px;
    background-color: #9c27b02b;
  }
</style>